<template>
  <div class="xm-table">
    <section class="table-filter clearfix">
      <slot name="filter"></slot>
    </section>

    <el-table
      v-bind="{
        ...$attrs,
        data: $attrs.tableData || fetchData,
        ref: $attrs.ref,
        border: $attrs.border || true,
      }"
      v-on="$listeners"
      ref='table'
      v-loading="isLoading"
    >
      <el-table-column v-if="config.hasCheck" type="selection" width="55">
      </el-table-column>
      <el-table-column v-if="config.hasIndex" type="index" width="50" label="序号">
      </el-table-column>
      <template v-for="item in config.columns">
        <el-table-column
          v-if="!item.isCustomColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          :min-width="item['minWidth']"
          :show-overflow-tooltip="item['showOverflowTooltip']"
          :sortable="item.sortable"
        >
          <template slot-scope="scope">
            <slot
              :name="`column-${item.prop}`"
              :data="scope.row"
              v-if="item.isSlot"
            ></slot>
            <span v-else :class="item.class">
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
        <slot v-if="item.isCustomColumn" :name="`column-${item.prop}`" :data="item">
        </slot>
      </template>
      <slot></slot>
    </el-table>

    <el-pagination
      class="pagination"
      v-if="config.hasPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParams.total"
      v-bind="config.pageConfig || {}"
    >
    </el-pagination>
  </div>
</template>

<script>
import lazyFetchMixin from "@/mixins/lazyFetchMixin";

export default {
  name: 'XmTable',
  props: {
    noWatchParams: {
      type: Object,
      default: () => {},
    },
  },
  mixins: [lazyFetchMixin],
  data() {
    return {
      isLoading: false,
      pageParams: {
        size: 10,
        page: 1,
        total: 0,
      },
    };
  },
  methods: {
    async commonFetch() {
      this.pageParams.page = 1;
      return this.requestFetch()
    },
    async requestFetch() {
      try {
        if (!this.config.request) {
          return
        }
        this.$emit('beforeFetch')
        let params = {}
        if (this.config.getParams) {
          params = this.config.getParams()
        } else {
          params = this.getParams();
        }

        if (this.config.isLoading) {
          this.isLoading = true;
        }

        let res = await this.config.request(params);
        if (this.config.dataParse) {
          res = this.config.dataParse(res);
        }
        this.fetchData = res.list;
        this.pageParams.total = res.total;
        this.$emit("afterFetch", res);
        return res
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false;
      }
    },
    handleSizeChange(value) {
      this.pageParams.page = 1;
      this.pageParams.size = value;
      this.requestFetch();
    },
    handleCurrentChange(value) {
      this.pageParams.page = value;
      this.requestFetch();
    },
    getParams() {
      const pageParams = this.getPageParams()
      if (this.params) {
        Object.keys(this.params).forEach((item) => {
          if (this.params[item] === "") {
            this.params[item] = undefined;
          }
        });
      }
      if (this.noWatchParams) {
        Object.keys(this.noWatchParams).forEach((item) => {
          if (this.noWatchParams[item] === "") {
            this.noWatchParams[item] = undefined;
          }
        });
      }
      return {
        ...pageParams,
        ...this.noWatchParams,
        ...this.params,
      };
    },
    getPageParams() {
      const pageParams = {};
      if (this.config.hasPage) {
        if (this.config.pageSizeKey) {
          pageParams[this.config.pageSizeKey] = this.pageParams.size;
        } else {
          pageParams["size"] = this.pageParams.size;
        }
        if (this.config.pageIndexKey) {
          pageParams[this.config.pageIndexKey] = this.pageParams.page;
        } else {
          pageParams["page"] = this.pageParams.page;
        }
      }
      return pageParams
    },
    // 获取复选框的勾选项
    getSelection() {
      return this.$refs.table.selection
    },
    getTableData() {
      return this.fetchData
    }
  },
};
</script>

<style scoped lang="scss">

</style>
